<template>
  <!--账务小类-->
  <div>
    <div class="account-big-type-box">
      <div style="display: flex;padding-left: 15px;padding-top: 11px;height: 30px" >
        <a  href="#">
          <div style="display: flex"  >
            <i class="icon-kehuzhangwu" style="margin-top: 4px;margin-right: 5px;margin-left: 5px"></i>
            <h3>账务小类展示&nbsp;&nbsp;&nbsp;</h3>
          </div>
        </a>
        <el-select v-model="isPayOrTake" style="width: 100px" size="mini" placeholder="请选择" @change="changeGroup">
          <el-option label="所有" :value=0 ></el-option>
          <el-option label="支出" :value=1 ></el-option>
          <el-option label="收入" :value=2></el-option>
        </el-select>
        <el-select v-model="bigAccoutId" style="width: 180px;margin-left: 10px" size="mini" placeholder="请选择" @change="changeBigAccount">
          <el-option
            v-for="item in bigAccountList"
            :key="item.bigAccountId"
            :label="item.bigAccountName"
            :value="item.bigAccountId">
          </el-option>
        </el-select>
      </div>
      <div class="account-big-type-box-detail">
        <el-table
          v-loading="loading"
          element-loading-text="已经很努力加载了(•́へ•́╬)"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          :data="dataList"
          style="width: 100%"
          height="552"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            label="类型"
            align="center"
            width="200">
            <template slot-scope="scope">
             <el-tag v-if="scope.row.is_pay_or_take===1" >
               <span >支出</span>
             </el-tag>
              <el-tag type="danger" v-if="scope.row.is_pay_or_take===2">
                <span >收入</span>

              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="大类名称"
            align="center"
            width="350">
            <template slot-scope="scope">
             <el-tag effect="dark" v-if="scope.row.is_pay_or_take===1" >  <span style="font-weight: bold;font-size: 16px">{{scope.row.big_account_name}}</span></el-tag>
             <el-tag effect="dark" type="danger" v-if="scope.row.is_pay_or_take===2">  <span style="font-weight: bold;font-size: 16px">{{scope.row.big_account_name}}</span></el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="小类名称"
            align="center"
            width="350">
            <template slot-scope="scope">
              <span style="font-weight: bold">{{scope.row.small_account_name}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="修改"
            align="center"
          >

            <template slot-scope="scope">
              <el-button icon="icon-xiugaimima" size="small" type="success">&nbsp;修改</el-button>
            </template>
          </el-table-column>
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
        </el-table>
        <div   style="position: relative">
          <el-pagination
            style="margin-top: 5px"
            align="center"
            :page-size="pageSize"
            :current-page="currentPage"
            background
            @current-change="changePage"
            layout="prev, pager, next"
            :total=total>
          </el-pagination>
          <div style="position: absolute;right: 10px;top: 3px">
            <el-button size="mini" type="primary" >批量删除</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {get} from "../../utils/request";
import {ACCOUNT_SMALL_SHOW_DATA} from "../../utils/basic-data";

export default {
  name: "AccountSMallType",
  data(){
    return{
      loading:true,
      bigAccountList:[],
      multipleSelection:[],
      dataList:[],
      pageSize:ACCOUNT_SMALL_SHOW_DATA,
      currentPage:1,
      total:0,
      isPayOrTake:0,
      bigAccoutId:null,
    }
  },
  created() {
    this.currentPage=1
  },
  mounted() {
    get('/api/v1/bigaccount/special').then(resp=>{
      this.bigAccountList=resp.data
      this.bigAccountList.unshift({bigAccountId:0,bigAccountName:'所有大类'})
      this.bigAccoutId=0
    })
    get('/api/v1/smallaccount/find',{now:this.currentPage,size:this.pageSize}).then(resp=>{

      this.dataList=resp.data.objectList
      this.total=resp.data.total
      this.currentPage=resp.data.currenPage
      this.loading=false
    })

  },
  methods:{
    changeGroup(value){
      this.loading=true
      this.currentPage=1
      get('/api/v1/smallaccount/find',{now:this.currentPage,size:this.pageSize,isPayTakeId:value}).then(resp=>{

        this.dataList=resp.data.objectList
        this.total=resp.data.total
        this.currentPage=resp.data.currenPage
        this.loading=false
      })
      if (value===0){

        get('/api/v1/bigaccount/special',{isPayTakeId:value}).then(resp=>{
          this.bigAccountList=resp.data
          this.bigAccountList.unshift({bigAccountId:0,bigAccountName:'所有大类'})
          this.bigAccoutId=0

        })
      }else {
        get('/api/v1/bigaccount/special',{isPayTakeId:value}).then(resp=>{

          this.bigAccountList=resp.data

          this.bigAccountList.unshift({bigAccountId:0,bigAccountName:'所有大类'})
          this.bigAccoutId=0
        })
      }
      this.loading=false
    },
    changeBigAccount(value){
      this.loading=true
      this.currentPage=1
      if (value===0){
        this.isPayOrTake=0
        get('/api/v1/smallaccount/find',{now:this.currentPage,size:this.pageSize}).then(resp=>{
          this.dataList=resp.data.objectList
          this.total=resp.data.total
          this.currentPage=resp.data.currenPage
        })
      }else {
        get('/api/v1/smallaccount/find',{now:this.currentPage,size:this.pageSize,bigAccountId:value}).then(resp=>{
          this.dataList=resp.data.objectList

          this.isPayOrTake=null

          this.total=resp.data.total
          this.currentPage=resp.data.currenPage
        })
      }
    this.loading=false


    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    changePage(value){

      get('/api/v1/smallaccount/find',{now:value,size:this.pageSize,isPayTakeId:this.isPayOrTake,bigAccountId:this.bigAccoutId}).then(resp=>{
        this.dataList=resp.data.objectList
        this.total=resp.data.total
        this.currentPage=resp.data.currenPage
      })
    }
  }

}
</script>

<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.account-big-type-box-detail{
  padding-top: 20px;
  width: 1260px;
  margin-left: 15px;
  height: 600px;
  border-radius: 20px;
  background-color: #f2f2f2;
}
a{
  text-decoration: none;
  color: #2c3e50;
}
h3{
  margin: 0;
}
.account-big-type-box{
  height: 674px;

  margin-top: 10px;
  width: 1290px;
  background-color: white;
  border-radius: 30px;
  box-shadow:  20px 20px 60px #bebebe,
  -20px -20px 60px #ffffff;
}
</style>
